<template>
  <div class="home">
    <Layout :style="{padding: '0 24px 24px 24px'}">
      <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>产品中心</BreadcrumbItem>
        <BreadcrumbItem>支付产品</BreadcrumbItem>
      </Breadcrumb>
      <Content :style="{padding: '24px 182px 24px 24px', minHeight: this.$h.GetContentBodyHeight()+'px', background: '#fff'}">
        <div class="con_body">
          <ul >
            <li  v-for="item in textarr" @click="fun(item)">
              <div class="img_icon">
                <img :src="item.img" alt="">
              </div>
              <div class="con_body_text">
                <h3>{{item.title}}</h3>
                <p>{{item.text}}</p>
              </div>
            </li>
          </ul>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script>
import zgh from '~/text/gzh.png';
import sm from '~/text/sm.png';
import sk from '~/text/sk.png';
import h5 from '~/text/h5.png';
  export default {
    props: {},
    components: {},
    data() {
      return {
        textarr:[
          {
            'img':zgh,
            'title':'公众号支付',
            'text':'用户在公众号内发起支付',
            'flag':'1'
          },
          {
            'img':sm,
            'title':'扫码支付',
            'text':'用户打开“微信扫一扫”，扫描商户二维码支付',
            'flag':'1'
          },
          {
            'img':sk,
            'title':'刷卡支付',
            'text':'用户打开微信钱包刷卡页面，商户扫码完成支付',
            'flag':'0'
          },
          {
            'img':h5,
            'title':'H5支付',
            'text':'在微信客户端外的移动端网页使用微信支付',
            'flag':'0'
          },
        ]
      }
    },
    methods: {
      fun(item){
              switch (item.flag) {
                      case '0':
                        this.$Message.success('暂未开通');
                        break;
                      case '1':
                        this.$Message.success('已成功开通');
                        break;
                    };
      }
    },
    watch: {},
    computed: {},
    created() {
    },
    mounted() {
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .con_body {
  width:100%;
  height:100%;
  }

  .con_body ul {
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;
    list-style:none;
  }

  .con_body ul li {
    height: 101px;
    float: left;
    width: 297px;
    border: 1px solid #e7e7eb;
    margin-right: 7%;
    margin-bottom: 20px;
  }
  .img_icon{
    width: 100px;
    height: 100%;
    overflow: hidden;
    float: left;
  }
  .img_icon img{
    width: 58px;
    height: 58px;
    display: block;
    margin: 20px auto auto auto;
    background: #f17d28;
    border-radius: 50%;

  }
  .con_body_text{
    float: left;
    width:195px;
    height:100%;
    padding: 28px 5px 17px 0px;
  }

</style>
